<script setup lang="ts">
import { ref } from 'vue';
import Gantt from '@/components/Gantt/index.vue';
import type { Task, Link } from 'dhtmlx-gantt';
import { v4 as uuid } from 'uuid';

const ganttTasks = ref<{
  data: Task[];
  links: Link[];
}>({
  data: [
    {
      id: uuid(),
      text: '植物大战僵尸',
      start_date: new Date('2023-10-04'),
      end_date: new Date('2023-11-11'),
    },
    {
      id: uuid(),
      text: '空洞骑士',
      start_date: new Date('2023-10-14'),
      end_date: new Date('2023-11-11'),
    },
    {
      id: uuid(),
      text: '奥日与森林',
      start_date: new Date('2023-11-04'),
      end_date: new Date('2023-11-11'),
    },
    {
      id: uuid(),
      text: '气球塔防',
      start_date: new Date('2023-11-14'),
      end_date: new Date('2023-12-12'),
    },
  ],
  links: [],
});

const getGanttList = () => {};
</script>

<script lang="ts">
export default {
  name: 'GanttTestView',
};
</script>

<template>
  <section>
    <h1>GanttTestView</h1>
    <Gantt
      v-if="ganttTasks.data.length"
      :tasks="ganttTasks"
      style="height: 500px"
      @handle="getGanttList()"
    />
  </section>
</template>

<style scoped>
/* PC电脑端 */
@media screen and (width <= 1024px) {
}
</style>
